<template>
  <el-space wrap class="card-wrap" style="margin: 30px auto">
    <el-card
      v-for="videoItem in videoData"
      :key="videoItem.id"
      class="box-card"
      style="width: 260px"
    >
      <template #header>
        <div class="card-header">
          <div @click="toVideo">
            <img :src="videoItem.cover[0]" style="width: 224px; height: 126px" class="image" />
            <div style="padding: 14px" class="card-header-box">
              <el-button type="default" size="xx-small" class="elbutton">作品</el-button>
              <span class="detail">{{ videoItem.moreBackup.videos[0].title }}</span>
            </div>
          </div>

          <div class="bottom">
            <div class="viewCount isVipFreeCustom">
              <div class="price" style="line-height: 14px" v-if="videoItem.commodityBackup?.price">
                <div>
                  <span style="font-size: 14px">￥</span>
                  {{ videoItem.commodityBackup?.price }}
                </div>
              </div>
              <span>100人浏览</span>
            </div>
            <div class="icon">
              <i class="iconfont icon-xiaoxi-xiaoxi"><span>5</span></i>
              <i class="iconfont icon-dianzan_kuai"><span>1</span></i>
              <i class="iconfont icon-xingxing"><span>26</span></i>
            </div>
          </div>
        </div>
      </template>

      <div class="card-footer">
        <div class="avatar">
          <img :src="videoItem.creatorBackup.avatar" alt="" class="item" />
        </div>
        <span class="item left">{{ videoItem.momentClassificationBackup.originAuthor }}</span>
        <span class="item right">{{ handleDate(videoItem.updateTime) }}</span>
      </div>
    </el-card>
  </el-space>
</template>

<script lang="ts">
import { defineComponent } from "vue";
import { ContentElement } from '@/api/class';

export default defineComponent({
  name: "VideoCard",
});
</script>

<script setup lang="ts">
import type { videoListContentType } from '@/api/resource/resourceType';
import { useRouter } from 'vue-router';

interface PropsData {
  videoData: videoListContentType[]|ContentElement[];
}
const props = defineProps<PropsData>();
const handleDate = function (time: number) {
  var date = new Date(time);
  var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
  var D = date.getDate() + ' ';
  return M + D;
};

const $router = useRouter();
const toVideo = () => {
  $router.push({ path: "/detail/video" });
};
</script>

<style scoped lang="less">
.card-wrap {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  .box-card:hover {
    cursor: pointer;
  }
  .box-card {
    .card-header {
      margin-bottom: 0;
      .card-header-box {
        width: 90%;
        display: flex;
        justify-content: flex-start;
        align-items: center;

        .elbutton {
          padding: 2px;
          height: 20px;
          font-size: xx-small;
          border-radius: 8px;
          border: 1px solid #333;
          margin-right: 10px;
          color: #000;
        }
        .elbutton:hover {
          color: #000;
          background-color: #fff;
        }
        .detail {
          font-size: 12px;
          cursor: pointer;
          display: inline-block;
          text-overflow: ellipsis;
          overflow: hidden;
          white-space: nowrap;
        }
      }

      .bottom {
        .viewCount {
          font-size: 12px;
          display: flex;
          -webkit-box-pack: justify;
          justify-content: space-between;
          -webkit-box-align: center;
          align-items: center;
          .price {
            color: #f93684;
            font-size: 16px;
            transform: translateY(-2px);
          }
        }
        .viewCount.isVipFreeCustom {
          height: 32px;
          line-height: 22px;
          padding-bottom: 7px;
        }
        p {
          span {
            font-size: x-small;
            color: #b1b5c1;
          }
        }

        .icon {
          color: #b1b5c1;
          margin: 5px auto;
          i {
            margin-right: 10px;
            font-size: small;
            span {
              padding: 0 5px;
            }
          }
        }
      }
    }

    .card-footer {
      display: flex;
      justify-content: left;
      align-items: center;
      height: 20px;
      .avatar {
        width: 40px;
        height: 40px;
        margin: 0 15px 10px 5px;
        img {
          width: 40px;
          height: 40px;
          border-radius: 50%;
          margin-top: 5px;
        }
      }
      .left {
        font-size: xx-small;
        width: 50px;
        display: inline-block;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
      }
      .right {
        font-size: xx-small;
        margin-left: 40px;
      }
    }
  }
}
</style>
